<template>
	<view class="industry">
		<view class="industryTop">
			<view class="topSearch">
				<image src="/static/img/index/61.png" mode="widthFix"></image>
				<input v-model="data.name" type="text" placeholder="输入类目名称" />
			</view>
		</view>

		<scroll-view scroll-y="true">
			<view class="list">
				<view @click="data.index = item.id" class="listItem" :class="data.index == item.id?'active':''"
					v-for="(item,index) in data.name?data.list.filter((item:any)=> item.name.indexOf(data.name) != -1):data.list" :key="index">
					{{item.name}}
					<image :src="data.index == item.id?'/static/img/index/62.png':'/static/img/index/52.png'"
						mode="widthFix"></image>
				</view>
			</view>

		</scroll-view>
		<view class="bot">
			<text @click="submit">提交</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { industryList } from '@/utils/api/shop'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	type Data = {
		index : number,
		list : any,
		name:string
	}
	const data = reactive<Data>({
		index: 0,
		list: [],
		name:''
	})
	onLoad(({ id }) => {
		industryList().then((res) => {
			data.list = res.data;
			if(id){
				data.index = id;
				return
			}
			if (res.data.length) {
				data.index = res.data[0].id
			}
		})
	})
	
	const submit = () => {
		const index = data.list.map((item:any)=>{return item.id}).indexOf(data.index)
		uni.$emit('storeInformation', data.list[index])
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.industry {
		height: 100vh;
		display: flex;
		background: #F4F6FA;
		flex-direction: column;

		.listItem {
			display: flex;
			height: 80rpx;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			color: #000000;
			background: #fff;
			font-size: 32rpx;
			border: 1rpx solid #fff;
			border-radius: 16rpx;
			margin-top: 24rpx;

			image {
				width: 36rpx;
			}
		}

		.list {
			>view {
				margin-top: 24rpx;
			}

			>view:nth-of-type(1) {
				margin: 0;
			}
		}

		.active {
			color: #6B64D3;
			border-color: #6B64D3;
		}

		.industryTop {
			padding: 37rpx 37rpx 16rpx 37rpx;
			background: #fff;
		}

		.topSearch {
			display: flex;
			align-items: center;
			border-radius: 76rpx;
			background: #F5F5F5;

			image {
				width: 32rpx;
			}

			padding: 0 32rpx;

			input {
				height: 74rpx;
				margin-left: 16rpx;
			}
		}

		scroll-view {
			flex: 1;
			overflow: auto;
			padding: 24rpx 36rpx;
		}

		.bot {
			padding: 12rpx 56rpx 60rpx 56rpx;
			background: #fff;

			text {
				display: inline-block;
				width: 100%;
				line-height: 88rpx;
				text-align: center;
				border-radius: 88rpx;
				background: #6B64D3;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
</style>